<template>
  <div class="lableList">
    <div
      v-for="item in dataArr"
      :key="item.productTagCode"
      class="lableList-item"
    >
      <div class="title pointer" @click="shrink(item)">
        <h3>{{ item.productTagName }}</h3>
        <span>
          <el-tag class="mr8 bg" size="small" v-if="item.tagTypeName">{{
            item.tagTypeName
          }}</el-tag>
          <i v-if="!item.isShow" class="el-icon-arrow-down" />
          <i v-else class="el-icon-arrow-up" />
        </span>
      </div>
      <div v-if="!item.isShow" class="tagShow">
        <div>
          <ol class="list list_2">
            <dl>
              <dt>标签尺寸</dt>
              <dd>
                {{ item.tagWidth + "*" + item.tagHeight
                }}<span class="unit">mm</span>
              </dd>
            </dl>
            <dl>
              <dt>标签形状</dt>
              <dd>
                {{
                  querySelectName(
                      tagShapeList,
                      item.tagShape,
                      "label",
                      "value"
                    )
                }}
              </dd>
            </dl>
            <dl>
              <dt>标签R角</dt>
              <dd>
                {{ item.tagBorderRadius || "--" }}<span class="unit">mm</span>
              </dd>
            </dl>
            <dl>
              <dt>标签边空</dt>
              <dd>{{ item.tagBorder || "--" }}<span class="unit">mm</span></dd>
            </dl>
            <dl>
              <dt>被贴物</dt>
              <dd>{{ item.postedContent || "--" }}</dd>
            </dl>
            <dl>
              <dt>套装枚数</dt>
              <dd>{{ item.matchQuantity || "--" }}</dd>
            </dl>
          </ol>
        </div>
        <!-- 印刷层 -->
        <div
          v-for="(list, index) in item.productTagPrintingLayerList"
          :key="index"
        >
          <div class="cTitle mt16">
            <h3>{{ list.printingLayerName }}</h3>
          </div>
          <ol class="list list_2">
            <dl>
              <dt>材料</dt>
              <dd>
                {{
                  list.printingMaterialName
                }}
              </dd>
            </dl>
            <dl>
              <dt>底膜颜色</dt>
              <dd>
                {{
                  list.baseFilmColorName
                }}
              </dd>
            </dl>
            <dl>
              <dt>数码位数</dt>
              <dd>{{ list.technoPlaces }}</dd>
            </dl>
            <dl>
              <dt>条码位数</dt>
              <dd>{{ list.barCodePlaces }}</dd>
            </dl>
            <dl>
              <dt>数码颜色</dt>
              <dd>{{ getColorName(list.technoColor) }}</dd>
            </dl>
            <dl>
              <dt>留胶材质</dt>
              <dd>
                {{
                  list.liuJiaoTextureName
                }}
              </dd>
            </dl>
            <dl v-if="list.printingLayerName == '表层'">
              <dt>表面要求</dt>
              <dd class="spanTag">
                {{ formatData(item.surfaceRequires)  }}
              </dd>
            </dl>
            <dl>
              <dt>刮开图层颜色</dt>
              <dd>
                {{
                  item.scrapingWordColorName
                }}
              </dd>
            </dl>
            <dl>
              <dt>刮开文字颜色</dt>
              <dd>
                {{
                  item.scrapingCoatingColorName
                }}
              </dd>
            </dl>
          </ol>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { querySelectName } from "@/utils";
export default {
  name: "LableShow",
  props: ["dataArr"],
  data() {
    return {
      querySelectName,
      tagShapeList: [
        {
          label: "长方形",
          value: "1",
        },
        {
          label: "正方形",
          value: "2",
        },
        {
          label: "圆形",
          value: "3",
        },
        {
          label: "椭圆形",
          value: "4",
        },
        {
          label: "异形",
          value: "5",
        },
      ],
      sourceData: [], // 刮开文字颜色列表
      printMaterials: [], // 印刷材料列表
      liuJiaoDataLists: [],
      requireDataLists: [], //表面要求
    };
  },
  created() {
    // this.getSelectList("color");
    // this.getSelectList("LiuJiaoTexture");
    // this.getPrintingMaterials();
    this.getRequireDataList();
  },
  methods: {
    shrink(item) {
      this.$set(item, "isShow", !item.isShow);
    },

    //处理表面要求回显
    formatData(val) {
      let str = []
      let arr = val.split(',');
      if (arr && arr.length > 0) {
        arr.forEach((k, i) => {
          this.requireDataLists.forEach((item) => {
            if (item.dicValueCode == k) {
              str.push(item.displayValue);
            }
          });
        });
      }
      return str.join(",");
    },

    // 获取表面要求列表
    getRequireDataList() {
      const params = {
        pageIndex: 1,
        pageSize: 9999,
        queryDataBaseFiled: "",
        likeWords: "",
        isShowDisabled: 1,
        dictionaryCode: "SurfaceRequire",
        dicValueState: -1,
        isDelete: -1,
      };
      this.$api.business
        .QueryPageDictionaryValueDataList(params)
        .then((res) => {
          this.requireDataLists = res.list;
        });
    },

    // 底膜颜色、刮开涂层颜色、刮开文字颜色等列表
    getSelectList(e) {
      const params = {
        pageIndex: 1,
        pageSize: 9999,
        queryDataBaseFiled: "",
        likeWords: "",
        isShowDisabled: 1,
        dictionaryCode: e == "color" ? "TagColor" : "LiuJiaoTexture",
        dicValueState: 1,
      };
      this.$api.business
        .QueryPageDictionaryValueDataList(params)
        .then((res) => {
          res.list.forEach((item) => {
            item.label = item.displayValue;
            item.value = item.dicValueCode;
          });
          if (e == "color") {
            this.sourceData = res.list;
          } else {
            this.liuJiaoDataLists = res.list;
          }
        });
    },

    getColorName(item){
      let str = ''
      if(item == 0){
        str = '黑码'
      }else if(item == 1){
        str = '彩码'
      }
      return str
    },


    // 获取印刷材料
    getPrintingMaterials() {
      this.$api.business.QueryPrintingMaterialDataList().then((res) => {
        this.printMaterials = res;
      });
    },
  },
};
</script>

<style scoped>
</style>
